<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"	
	xmlns:p="http://primefaces.org/ui"
	template="/pages/plantilla.xhtml">
	
	<ui:define name="title"> WORKSPACE: Registrar Usuario</ui:define>
	<ui:define name="contenido" >
	<f:view>
		<h:form id="myform" prependId="false">
			<p:growl id="growl" showDetail="true"/>  
			<p:fieldset id="fsCrearUsuario" legend="Crear/Editar Usuario" styleClass="ui-state-hover" style="align:center">
				<table style="width:750px">
				<tr>
				<td colspan="4" align="center">
				<p:inputText id="inpNom" value="#{usuarioController.usuario.nomUsuario}" label="Keyword" style="width:200px;" />  
        		<p:watermark for="inpNom" value="Nombres*" />
        		<p:spacer width="10px"/>
        		<p:inputText id="inpApeP" value="#{usuarioController.usuario.apePatUsuario}" label="Keyword" style="width:200px;"/>  
        		<p:watermark for="inpApeP" value="Apellido Paterno*" />
        		<p:spacer width="10px"/>
        		<p:inputText id="inpApeM" value="#{usuarioController.usuario.apeMatUsuario}" label="Keyword" style="width:200px;"/>  
        		<p:watermark for="inpApeM" value="Apellido Materno*" />  
				</td>
				</tr>
				<tr>
				<td width="80px" align="right"><h:outputText value="Contrasea*:"/></td>
				<td><p:inputText id="inpPsw" value="#{usuarioController.usuario.pswUsuario}"/></td>
				<td align="right" width="200px"><h:outputText value="Correo:"/></td>
				<td><p:inputText id="inpCorreo" style="width:200px;" value="#{usuarioController.usuario.emailUsuario}"/>
				</td>
				</tr>
				<tr>
				<td align="right"><h:outputText value="Nick*:"/></td>
				<td colspan="2"><p:inputText id="inpNik" value="#{usuarioController.usuario.nickUsuario}"/></td>
				<td rowspan="4">
				<p:fieldset>
				<h:outputText value="Grupos:" />  
				<div style="height:100px; overflow-y:scroll;">
		        <p:selectManyCheckbox value="#{usuarioController.usuario.grupos}"  
		            layout="pageDirection">  
		            <f:selectItems value="#{usuarioController.grupos}" var="grup" itemValue="#{grup.idGrupo}" />  
		        </p:selectManyCheckbox>
				</div>
				</p:fieldset>
				</td>
				</tr>
				<tr>
				<td align="right"><h:outputText value="Telefono:"/></td>
				<td colspan="2"><p:inputText id="inpTelf" value="#{usuarioController.usuario.telfUsuario}"/></td>
				</tr>
				<tr>
				<td align="right"><h:outputText value="Cargo:"/></td>
				<td colspan="2"><p:inputText id="inpCargo" style="width:375px;" value="#{usuarioController.usuario.cargoUsuario}"/></td>
				</tr>
				<tr>
				<td align="right"><h:outputText value="Perfil*:"/></td>
				<td colspan="2"><h:selectOneMenu value="#{usuarioController.usuario.perfilUsuario}">
					<f:selectItem itemLabel="Escoja una opcion" itemValue="0" />
					<f:selectItem itemLabel="Usuario Normal" itemValue="3" />
					<f:selectItem itemLabel="Usuario Moderador" itemValue="2" />
					</h:selectOneMenu></td>
				</tr>
				<tr>
				<td colspan="4" align="center">
				<p:commandButton value="Guardar" actionListener="#{usuarioController.guardarUsuario}" update="growl, fsCrearUsuario"/>
				<p:commandButton value="Cancelar" actionListener="#{usuarioController.limpiarUsuario}" update="fsCrearUsuario"/>
				</td>
				</tr>
				</table>
			</p:fieldset>
 		</h:form>
 		</f:view>
	</ui:define>
</ui:composition>